import React, { useEffect } from "react";
import "./index.scss";
import CustomForm from "../CustomForm";
import CustomTable from "../CustomTable";
import { FormItemType } from "../CustomForm/utils/types";
import { ReportPagePropsInt } from "./index.model";

export default function ReportPage(props: ReportPagePropsInt) {
  const getSearchProps: () => FormItemType[] = () => {
    const res = props.tableProps?.columns
      ?.filter((el) => el.search)
      .map((el) => {
        return {
          ...el.search,
          field: el.search?.field ?? el.dataIndex,
          label: el.search?.label ?? el.title,
        };
      });

    return res as FormItemType[];
  };

  const tableRef = React.createRef<any>();

  const onSearch = (params: any) => {
    tableRef.current?.getData(params);
  };

  const defaultSearchArea = () => {
    return (
      <div className="default-search-area px-2 pt-4 border-b">
        {
          <CustomForm
            formAttrs={{
              layout: "inline",
              onSubmit: onSearch,
            }}
            reset={onSearch}
            items={getSearchProps()}
          ></CustomForm>
        }
      </div>
    );
  };

  const defaultTableArea = () => {
    return (
      <div className="h-full flex overflow-hidden flex-1">
        <CustomTable
          ref={tableRef}
          columns={props.tableProps?.columns || []}
          {...props.tableProps}
          getData={props.getData}
          data={props.data}
          operationButtons={props.operationButtons}
        ></CustomTable>
      </div>
    );
  };

  useEffect(() => {}, [tableRef]);

  return (
    <div className="report-page w-full h-full flex flex-col" id="fullEle">
      <div>{defaultSearchArea()}</div>
      <div className="flex-1 flex-col overflow-hidden flex p-2 bg-white  ">
        {defaultTableArea()}
      </div>
    </div>
  );
}
